<template>
  <view class="main">
    <form class="form">
      <view class="form_item mt50">
        <view class="title">含税销售额</view>
        <input name="input" type="number" placeholder="0" v-model="oldTax" />
      </view>
      <view class="form_item">
        <view class="title">增值税率</view>
        <picker @change="PickerChange" :value="index" :range="picker">
          <view class="picker flex_align">
            {{ index > -1 ? picker[index] : '请选择税率' }}
            <u-icon style="margin-left: 10rpx" class="icon" name="arrow-right" color="#666666" size="18"></u-icon>
          </view>
        </picker>
      </view>
    </form>
    <view class="result">
      <view class="tax-title">
        <text>
          计算结果：
        </text>
      </view>
      <view class="tax-text">
        <text>
          不含税销售额(元)
        </text>
        <text>
          {{ newTax }}
        </text>
      </view>
      <view class="tax-text">
        <text>
          增值税税额(元)
        </text>
        <text>
          {{ taxCount }}
        </text>
      </view>
    </view>
  </view>
</template>

<script type="text/javascript" src="plus-confusion://../tools/zzs/index"></script>

<style lang="scss" scoped>
.main {
  min-height: 94vh;
  overflow-y: auto;
  background-color: #f1f1f1;

  .result {
    margin-top: 60rpx;
    padding: 0 30rpx;

    .tax-title {
      font-weight: bold;
      font-size: 32rpx;
      color: #333;
    }

    .tax-text {
      margin-top: 30rpx;
      font-size: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .form_item {
    background-color: #ffffff;
    padding: 2rpx 30rpx;
    min-height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>